<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>后台管理 - 易买网</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../scripts/function.js"></script>
	<script type="text/javascript" src="../plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="../scripts/request.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../plugins/element-ui/element-ui.css">
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="../images/logo.gif"/></div>
		<div class="help"><a href="../index.html">返回前台页面</a></div>
		<div class="navbar">
			<ul class="clearfix">
				<li><a href="index.html">首页</a></li>
				<li class="current"><a href="user.html">用户</a></li>
				<li><a href="product.html">商品</a></li>
				<li><a href="order.html">订单</a></li>
				<li><a href="guestbook.html">留言</a></li>
				<li><a href="news.html">新闻</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="welcome wrap">
			管理员{{ userId }}您好，今天是{{ time }}，欢迎回到管理后台。
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 管理后台
	</div>
	<div id="main" class="wrap">
		<div id="menu-mng" class="lefter">
			<div class="box">
				<dl>
					<dt>用户管理</dt>
					<dd><em><a href="user-add.html">新增</a></em><a href="user.html">用户管理</a></dd>
					<dt>商品信息</dt>
					<dd><em><a href="productClass-add.html">新增</a></em><a href="productClass.html">分类管理</a></dd>
					<dd><em><a href="product-add.html">新增</a></em><a href="product.html">商品管理</a></dd>
					<dt>订单管理</dt>
					<dd><a href="order.html">订单管理</a></dd>
					<dt>留言管理</dt>
					<dd><a href="guestbook.html">留言管理</a></dd>
					<dt>新闻管理</dt>
					<dd><em><a href="news-add.html">新增</a></em><a href="news.html">新闻管理</a></dd>
				</dl>
			</div>
		</div>
		<div class="main" v-loading="loading">
			<h2 style="cursor: pointer" onclick="window.location.href='user.html'">修改用户</h2>
			<div class="manage">
				<form @submit.prevent="updateUser()">
					<table class="form">
						<tr>
							<td class="field">用户名(*)：</td>
							<td><input type="text" class="text" name="userName" v-model="user.userId"
									   readonly="readonly"/>
							</td>
						</tr>
						<tr>
							<td class="field">真实姓名(*)：</td>
							<td><input type="text" class="text" name="name" v-model="user.username"/></td>
						</tr>
						<tr>
							<td class="field">登录密码(*)：</td>
							<td><input type="text" class="text" name="passWord" v-model="password.pw1"/></td>
						</tr>
						<tr>
							<td class="field">确认密码(*)：</td>
							<td><input type="text" class="text" name="passWord" v-model="password.pw2"/></td>
						</tr>
						<tr>
							<td class="field">性别(*)：</td>
							<td>
								<input type="radio" name="sex" v-model="user.sex" value="1"/>男
								<input type="radio" name="sex" v-model="user.sex" value="0"/>女
							</td>
						</tr>
						<tr>
							<td class="field">出生日期：</td>
							<td>
								<el-date-picker
										size="mini"
										value-format="yyyy-MM-dd"
										v-model="user.birthday"
										type="date"
										placeholder="选择日期">
								</el-date-picker>

							</td>
						</tr>
						<tr>
							<td class="field">手机(*)：</td>
							<td><input type="text" class="text" name="mobile" v-model="user.mobile"/></td>
						</tr>
						<tr>
							<td class="field">地址(*)：</td>
							<td><input type="text" class="text" name="userAddress" v-model="user.address"/></td>
						</tr>
						<tr>
							<td class="field">状态(*)：</td>
							<td>
								<input type="radio" name="status" v-model="user.status" value="0"/>管理员
								<input type="radio" name="status" v-model="user.status" value="1"/>用户
								<input type="radio" name="status" v-model="user.status" value="2"/>禁用账户
							</td>
						</tr>
						<tr>
							<td></td>
							<td><label class="ui-blue"><input type="submit" name="submit" value="更新"/></label></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
	</div>
</div>

<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../api/user.js"></script>
<script type="text/javascript" src="../api/common.js"></script>
<script type="text/javascript" src="../plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	axios.get("/user/getStatus")
	// 检测URL参数
	const urlParams = new URLSearchParams(window.location.search);
	let id = urlParams.get('id');

	const app = new Vue({
		el: '#app',
		data: {
			loading: false,
			password: {
				pw1: '',
				pw2: ''
			},
			user: {
				sex: '1',
				status: '1'
			},
			userId: getUserInfo().userId,
			time: getFormattedDate()
		},
		async created() {
		},
		async mounted() {
			this.loading = true
			await this.getUser()
			this.loading = false
		},
		methods: {
			async getUser() {
				const user = await getUserById(id)
				console.log(user)
				this.user = user.data
			},
			async updateUser() {
				this.loading = true
				if (this.password.pw1 !== this.password.pw2) {
					this.$message({
						message: '两次密码不对请重新尝试哦',
						type: 'warning'
					});
					this.loading = false
					return
				}

				if (this.password.pw1.trim() === '' && this.password.pw2.trim() === '') {
					await updateApi(id, this.user)
					this.$message({
						message: '修改成功',
						type: 'success'
					});
					this.loading = false

				} else if (this.password.pw1 === this.password.pw2) {
					this.user.password = this.password.pw1;
					await updateApi(id, this.user)
					this.$message({
						message: '修改成功',
						type: 'success'
					});
					this.loading = false

				}
				setTimeout(async () => {
					window.location.href = '/easyban/manage/user.html'
				}, 800)

			}
		}
	})
</script>
</body>
</html>
